<template>
  <div class="container">
    <el-form :model="formData" label-width="180px" class="demo-ruleForm">
      <el-form-item prop="photo">
        <el-avatar
          :src="formData.photo"
          style="width: 150px; height: 150px"
        ></el-avatar>
      </el-form-item>
      <el-form-item label="用户名：" prop="username">
        <el-input v-model="formData.username" readonly></el-input>
      </el-form-item>
      <!-- 添加更多个人信息字段如：电话、地址等 -->
      <el-form-item label="密码：" prop="password">
        <el-input
          type="password"
          v-model="formData.password"
          readonly
        ></el-input>
      </el-form-item>
      <el-form-item label="姓名：" prop="nickname">
        <el-input type="text" v-model="formData.nickname" readonly></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import request from '@/api/request'

export default {
  data() {
    return {
      formData: {
        username: '',
        password: '******',
        nickname: '',
        photo: '',
      },
    }
  },
  methods: {
    getStudentInfo() {
      request.get('/student/studentInfo').then((res) => {
        this.formData.username = res.data.username
        this.formData.nickname = res.data.nickname
        this.formData.photo = res.data.photo
      })
    },
  },
  mounted() {
    this.getStudentInfo()
  },
}
</script>
<style scoped>
.container {
  width: 600px;
  padding-top: 50px;
}

.demo-ruleForm{
  margin-left: -10%;
  margin-top: 6%;
  width: 400px;
}
</style>
